@extends('layouts.auth')

@section('content')
    <div class="am-u-md-7 am-text-center"><img src="http://hd.miku.cf/statics/images/login_bg.jpg"
                                               style="max-width: 100%;height: auto;"></div>
    <div class="am-u-md-5">

        <form class="am-g am-padding-sm" id="form-with-tooltip" role="form" method="POST" action="{{ url('admin/login') }}">
            {!! csrf_field() !!}
            <div class="am-g am-margin-top-sm ">
                <div class=" am-u-sm-7 am-md-text-left am-vertical-align-middle" style="font-size: 2.4rem;">
                    会员登录
                </div>
            </div>
            <div class="am-g am-margin-top-sm am-form-group">
                <div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
                    帐号
                </div>
                <div class="am-u-sm-12 am-u-md-9">
                    <input type="text" name="email" class="am-form-field am-radius" type="text" id="doc-vld-name-2-0"
                           minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
                </div>
            </div>
            <div class="am-g am-margin-top-sm am-form-group">
                <div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
                    密码
                </div>
                <div class="am-u-sm-12 am-u-md-9">
                    <input type="password" name="password" class="am-form-field am-radius" type="password"
                           id="doc-vld-pwd-1-0" placeholder="请输入密码" pattern="^\w{6}$" required
                           data-foolish-msg="请输入密码"/>
                </div>
            </div>

            <div class=" am-u-sm-4 am-u-sm-offset-8 ">
                <div class="am-checkbox">
                    <label>
                        <input type="checkbox" name="remember"> 保持登录
                    </label>
                </div>
            </div>

            <div class=" am-g ">
                <div class="am-u-md-1 am-hide-sm-only"></div>
                <div class=" am-u-sm-12 am-u-md-11 am-margin-bottom-sm">
                    <button type="submit" class="am-btn am-btn-primary am-radius am-btn-block">登录</button>
                </div>

            </div>

        </form>

    </div>
@endsection
@section('footer')
    <script language="JavaScript">
        $(function () {
            var $form = $('#form-with-tooltip');
            var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
            $tooltip.appendTo(document.body);
            $form.validator();
            var validator = $form.data('amui.validator');
            $form.on('focusin focusout', '.am-form-error input', function (e) {
                if (e.type === 'focusin') {
                    var $this = $(this);
                    var offset = $this.offset();
                    var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));
                    $tooltip.text(msg).show().css({
                        left: offset.left + 10,
                        top: offset.top + $(this).outerHeight() + 10
                    });
                } else {
                    $tooltip.hide();
                }
            });
        });
    </script>
@endsection

